<script setup>
import { ref } from 'vue';
import router from '../router';
import { useNavbarStore } from '../store/navbar';
import { useUserStore } from '../store/user';
import { useCartStore } from '../store/cartStore';

var navbarStore = useNavbarStore()
const userStore = useUserStore();

const handleClick = () => {
    userStore.$patch({
        modalVisible: true
    })
}
const handleLogout = () => {
    userStore.$patch({
        id: '',
        username: '',
        avatar: '',
        token: '',
        isLogin: false,
        modalVisible: false,
    })
    localStorage.removeItem("token")

    if (navbarStore.activeMenu === '/userinfo') {
        router.push({ name: 'Dashboard' })
    }
    cartStore.clearCart()
}

const clickCart = () => {
    if (!userStore.isLogin) {
        userStore.$patch({
            modalVisible: true
        })
    } else {
        navbarStore.setShoppingCar(true)
    }
}


//搜索栏跳转
const keyWord = ref()
const search = () => {
    router.push({ name: 'PetsShopping', query: { keyWord: keyWord.value } })
        .then(() => {
            window.location.reload();
        })
}

//商品分类dropMenu跳转
const toPetsShoppingByType = (index) => {
    router.push({ name: 'PetsShopping', query: { type: index } })
        .then(() => {
            window.location.reload();
        })
}

var cartStore = useCartStore()
const deleteGoods = (goodsId) => {
    cartStore.removeFromCart(goodsId)
}

const toCartDetail = () => {
    navbarStore.setShoppingCar(false)
    router.push({ name: 'ShoppingCart' })
}

const clearAllCartGoods = () => {
    cartStore.handleClearCart(userStore.id)
}

</script>

<template>
    <el-drawer v-model="navbarStore.shoppingCar" direction="rtl" size="23%" @close="navbarStore.setShoppingCar(false)">
        <template #header>
            <div class="text-black font-bold text-xl border-b-2">
                <p class="mb-4"> 购物车 </p>
            </div>
        </template>

        <template #default>
            <div v-if="cartStore.totalQuantity !== 0" class="content">
                <div v-for="item in cartStore.cartList" :key="item"
                    class=" w-full mb-3 text-slate-500 text-xs hover:bg-slate-100 rounded-md p-2">
                    <div class="flex">
                        <img class="w-14 h-14 rounded-md" :src="item.goods.goodsPhoto" />
                        <div class="goods_descripation ml-6 flex flex-col justify-between my-2 flex-1 gap-1">
                            <div class="font-bold">{{ item.goods.goodsName }}</div>
                            <div class="num">
                                <p>{{ item.cgNum }} x {{ item.goodsSpecs.goodsPrice }} ¥</p>
                            </div>
                        </div>
                        <button class="close_button flex justify-end mt-2 mx-2" @click="deleteGoods(item.cgId)">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="w-3 h-3">
                                <path
                                    d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
                            </svg>
                        </button>
                    </div>

                    <div class="specification mt-1 ml-20">
                        <div v-for="(value, key) in JSON.parse(item.goodsSpecs.goodsSpecs)" class="flex gap-4"
                            :key="key">
                            <div class="font-bold">
                                {{ key }}
                            </div>
                            <div>
                                {{ value }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div v-else class="flex justify-center text-slate-500"> 
                您的购物车目前是空的~
            </div>
        </template>

        <template #footer>
            <div v-if="cartStore.totalQuantity !== 0">
                <div class="flex justify-between items-center mb-5">
                    <p class="font-bold text-xl text-black">
                        购物小计:
                    </p>
                    <p class="text-xl text-red-600">
                        {{ cartStore.totalPrice }} ¥
                    </p>
                </div>

                <div class="flex w-full">
                    <button class="bg-[#f5f6f6] w-1/2 h-10" @click="clearAllCartGoods"> 清空购物车 </button>
                    <button class="bg-red-600 text-white w-1/2 h-10" @click="toCartDetail()"> 查看我的购物车 </button>
                </div>
            </div>
        </template>
    </el-drawer>

    <div class="w-full bg-white">
        <div class="top-bar text-sm font-sans h-12 bg-[#f7f8f8] flex justify-between items-center px-40">
            <div class="">欢迎来到宠物之家，国内最大的宠物出售、宠物交易商城!</div>
            <div v-if="!userStore.isLogin" class="flex gap-3">
                <div class="cursor-pointer hover:text-red-600 transition duration-300 ease-in-out" @click="handleClick">
                    登录
                </div>
            </div>
            <div v-else class="flex gap-3 cursor-pointer">
                <el-popover placement="top" :width="200" trigger="hover">
                    <template #reference>
                        <div class="flex justify-center items-center space-x-2">
                            <a>{{ userStore.username }}</a>
                            <img class="h-4" src="../assets/image/avatar.png" alt="avator" />
                        </div>
                    </template>
                    <div class="w-full">
                        <a @click="handleLogout"
                            class="cursor-pointer flex items-center justify-center hover:text-[#d0021b]">退出登录</a>
                    </div>
                </el-popover>
            </div>
        </div>

        <div class="mid-bar md:mx-40 flex justify-center items-center gap-10">
            <div class="logo w-1/5 h-28">
                <router-link to="/" exact>
                    <img class="object-contain w-full h-full" src="../assets/image/logo.png" alt="logo">
                </router-link>
            </div>

            <div class="search-bar flex border-slate-400 w-3/5">
                <input v-model="keyWord"
                    class="border-2 border-gray-300 w-4/5 h-12 p-3 rounded-md focus:border-red-600 outline-none"
                    type="text" placeholder="输入关键词搜索..." />
                <button
                    class="bg-red-600 text-white h-12 px-5 font-bold rounded-md hover:opacity-75 transition duration-300 ease-in-out"
                    @click="search">搜索</button>
            </div>

            <button class="shopping-car flex gap-3 items-center hover:text-red-600 transition duration-300 ease-in-out"
                @click="clickCart()">
                <div class="relative">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="w-8 h-8">
                        <path
                            d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z" />
                    </svg>
                    <div class="absolute bottom-5 left-5">
                        <div
                            class="flex bg-red-600 text-white rounded-full text-xs w-5 h-5 justify-center items-center">
                            <p>{{ cartStore.totalQuantity }}</p>
                        </div>

                    </div>
                </div>
                <div class="text-sm gap-3">
                    <div class="flex items-center font-bold"> 购物车 </div>
                    <div class="flex items-center">
                        <p>合计 {{ cartStore.totalPrice }} ¥</p>
                    </div>
                </div>
            </button>
        </div>

        <div class="navBar w-full">
            <el-menu mode="horizontal" :default-active="navbarStore.activeMenu" router>

                <div class="group ml-40 bg-[#f0f1f2] flex justify-between">
                    <div class="flex items-center p-2 pl-4 gap-2 w-48 h-full">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-4 h-4">
                            <path
                                d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" />
                        </svg>
                        <div class="text-base">
                            商品分类
                        </div>
                    </div>
                    <div class="flex justify-center items-center pr-4">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4">
                            <path
                                d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
                        </svg>
                    </div>


                    <div v-if="navbarStore.dropMenuVisible"
                        class="dropdown-menu absolute top-full left-40 bg-white w-56 border border-slate-300 border-t-none text-sm ">
                        <div class="h-10 px-4 py-1 flex items-center hover:bg-[#d4111f] hover:text-white mt-2 transition duration-300 ease-in-out cursor-pointer"
                            @click="toPetsShoppingByType(1)">
                            挑选狗狗
                        </div>
                        <div class="h-10 px-4 py-1 flex items-center hover:bg-[#d4111f] hover:text-white transition duration-300 ease-in-out cursor-pointer"
                            @click="toPetsShoppingByType(3)">
                            挑选猫猫
                        </div>
                        <div class="h-10 px-4 py-1 flex items-center hover:bg-[#d4111f] hover:text-white transition duration-300 ease-in-out cursor-pointer"
                            @click="toPetsShoppingByType(2)">
                            挑选宠物用品
                        </div>
                    </div>

                    <div v-else
                        class="dropdown-menu2 absolute top-full left-40 bg-white w-56 border border-slate-300 border-t-none text-sm ">
                        <div class="h-10 px-4 py-1 flex items-center hover:bg-[#d4111f] hover:text-white mt-2 transition duration-300 ease-in-out cursor-pointer"
                            @click="toPetsShoppingByType(1)">
                            挑选狗狗
                        </div>
                        <div class="h-10 px-4 py-1 flex items-center hover:bg-[#d4111f] hover:text-white transition duration-300 ease-in-out cursor-pointer"
                            @click="toPetsShoppingByType(3)">
                            挑选猫猫
                        </div>
                        <div class="h-10 px-4 py-1 flex items-center hover:bg-[#d4111f] hover:text-white transition duration-300 ease-in-out cursor-pointer"
                            @click="toPetsShoppingByType(2)">
                            挑选宠物用品
                        </div>
                    </div>
                </div>


                <div class="ml-10"></div>

                <el-menu-item index="/">
                    <div class="flex p-2 gap-2 rounded-md justify-center items-center w-32 h-12">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="w-4 h-4">
                            <path
                                d="M511.8 287.6H576V240L288.4 0 0 240v47.6H64.1V512H224V352H352V512H512.8l-1-224.4z" />
                        </svg>
                        <div class="text-base"> 首页 </div>
                    </div>
                </el-menu-item>

                <el-menu-item index="/shopping">
                    <div class="flex p-2 gap-2 rounded-md justify-center items-center w-32 h-12">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="w-4 h-4">
                            <path
                                d="M36.8 192H603.2c20.3 0 36.8-16.5 36.8-36.8c0-7.3-2.2-14.4-6.2-20.4L558.2 21.4C549.3 8 534.4 0 518.3 0H121.7c-16 0-31 8-39.9 21.4L6.2 134.7c-4 6.1-6.2 13.2-6.2 20.4C0 175.5 16.5 192 36.8 192zM64 224V384v80c0 26.5 21.5 48 48 48H336c26.5 0 48-21.5 48-48V384 224H320V384H128V224H64zm448 0V480c0 17.7 14.3 32 32 32s32-14.3 32-32V224H512z" />
                        </svg>
                        <a class="text-base">宠物商店</a>
                    </div>
                </el-menu-item>

                <el-menu-item index="/userinfo">
                    <div class="flex p-2 gap-2 rounded-md justify-center items-center w-32 h-12">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-4 h-4">
                            <path
                                d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z" />
                        </svg>
                        <a class="text-base">个人空间</a>
                    </div>
                </el-menu-item>
            </el-menu>
        </div>

    </div>
</template>

<style scoped>
.el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: none;
    color: rgb(239 68 68) !important
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    background-color: white;
    color: rgb(239 68 68) !important;
    outline: none;
}

.el-menu--horizontal>.el-menu-item {
    align-items: center;
    border-bottom: none;
    color: var(--el-menu-text-color);
    display: inline-flex;
    height: 100%;
    justify-content: center;
    margin: 0;
}


.el-menu-item.is-active {
    color: rgb(239 68 68) !important;
}

.dropdown-menu {
    display: none;
}

.group:hover .dropdown-menu,
.dropdown-menu:hover {
    display: block;
}

.el-popover-class {
    padding: 0;
}
</style>
